<template>
  <view class="template-integral tn-safe-area-inset-bottom">
    <!-- 顶部绿色背景区域 -->
    <view class="page-header">
      <!-- 导航栏 -->
      <tn-nav-bar fixed alpha customBack>
      	<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
      		<text class='icon tn-icon-left'></text>
      	</view>
      </tn-nav-bar>
      
      <!-- 标题区域 -->
      <view class="header-content" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
        <view class="header-title">个人积分详情</view>
        <view class="header-subtitle">感谢您的每一次参与</view>
      </view>
      
      <!-- 背景装饰 -->
      <view class="header-decoration"></view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-card">
      <view class="stats-content">
        <view class="stat-item-left">
          <view class="stat-number green">{{stats.totalCount}}</view>
          <view class="stat-label">累计获得次数</view>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item-right">
          <view class="stat-number green">{{formatIntegral(totalIntegral)}}</view>
          <view class="stat-label">累计积分总额</view>
        </view>
      </view>
    </view>

    <!-- Tab导航 -->
    <view class="tab-container">
      <view 
        class="tab-item" 
        :class="{active: currentTab === item.value}"
        v-for="(item, index) in tabList" 
        :key="index"
        @click="switchTab(item.value)">
        <text>{{item.label}}</text>
      </view>
    </view>

    <!-- 积分明细列表 -->
    <view class="integral-list-container">
      <view class="integral-list">
        <view 
          class="integral-item" 
          v-for="(item,index) in filteredIntegral" 
          :key="index">
          <view class="item-content">
            <!-- 标题和时间 -->
            <view class="item-header">
              <view class="item-title">{{item.name}}</view>
              <view class="item-date">{{formatDate(item.time)}}</view>
            </view>
            
            <!-- 积分和状态 -->
            <view class="item-middle">
              <view class="integral-amount" :class="item.integral.startsWith('+') ? 'positive' : 'negative'">
                {{item.integral}}
              </view>
              <view class="status-badge" :class="'status-' + item.status">
                {{getStatusText(item.status)}}
              </view>
            </view>
            
            <!-- 备注和订单号 -->
            <view class="item-footer" v-if="item.remark || item.orderNo">
              <view class="item-remark" v-if="item.remark">{{item.remark}}</view>
              <view class="item-order" v-if="item.orderNo">订单号: {{item.orderNo}}</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredIntegral.length === 0">
        <view class="empty-icon">📋</view>
        <view class="empty-text">暂无积分记录</view>
      </view>
    </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'

  export default {
    name: 'TemplateIntegral',
    mixins: [template_page_mixin],
    data(){
      return {
        currentTab: 'all',
        tabList: [
          {value: 'all', label: '全部'},
          {value: 'completed', label: '已完成'},
          {value: 'processing', label: '处理中'},
          {value: 'cancelled', label: '已取消'}
        ],
        totalIntegral: 653596,
        stats: {
          totalCount: 156,
          monthCount: 23
        },
        integral: [{
          name: '每日签到',
          time: '2024-10-28 22:45:29',
          color: 'blue--dark',
          integral: '+10',
          status: 'completed',
          remark: '连续签到奖励',
          orderNo: ''
        },{
          name: '周边兑换 手机壳',
          time: '2024-10-25 20:20:50',
          color: 'purplered',
          integral: '-666',
          status: 'completed',
          remark: '兑换成功',
          orderNo: 'DN202410251002'
        }, {
          name: '每日签到 连续签到7天',
          time: '2024-10-20 18:11:19',
          color: 'blue--dark',
          integral: '+100',
          status: 'completed',
          remark: '连续签到奖励',
          orderNo: ''
        }, {
          name: '积分兑换审核中',
          time: '2024-10-18 13:42:42',
          color: 'orange',
          integral: '-500',
          status: 'processing',
          remark: '等待审核',
          orderNo: 'DN202410181003'
        }, {
          name: '每日签到 连续签到5天',
          time: '2024-10-16 12:14:43',
          color: 'blue--dark',
          integral: '+50',
          status: 'completed',
          remark: '',
          orderNo: ''
        }, {
          name: '活动奖励',
          time: '2024-10-15 10:21:08',
          color: 'blue--dark',
          integral: '+200',
          status: 'completed',
          remark: '参与校友会活动',
          orderNo: ''
        }, {
          name: '每日签到 连续签到3天',
          time: '2024-10-14 08:56:32',
          color: 'blue--dark',
          integral: '+50',
          status: 'completed',
          remark: '',
          orderNo: ''
        }, {
          name: '积分兑换已取消',
          time: '2024-10-12 08:40:57',
          color: 'gray',
          integral: '-300',
          status: 'cancelled',
          remark: '用户取消',
          orderNo: 'DN202410121001'
        }, {
          name: '每日签到',
          time: '2024-10-10 08:22:21',
          color: 'blue--dark',
          integral: '+10',
          status: 'completed',
          remark: '',
          orderNo: ''
        }],
      }
    },
    computed: {
      filteredIntegral() {
        if (this.currentTab === 'all') {
          return this.integral;
        }
        return this.integral.filter(item => item.status === this.currentTab);
      }
    },
    methods: {
      // 返回
      goBack() {
        uni.navigateBack({ delta: 1 });
      },
      // Tab切换
      switchTab(tab) {
        this.currentTab = tab;
      },
      // 格式化积分
      formatIntegral(num) {
        return num.toLocaleString();
      },
      // 格式化日期
      formatDate(dateStr) {
        if (!dateStr) return '';
        const date = new Date(dateStr.replace(/-/g, '/'));
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}/${month}/${day}`;
      },
      // 获取状态文本
      getStatusText(status) {
        const statusMap = {
          'completed': '已完成',
          'processing': '处理中',
          'cancelled': '已取消'
        };
        return statusMap[status] || '';
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 页面背景 */
  .template-integral {
    background-color: #F7F9FC;
    min-height: 100vh;
  }

  /* 顶部Header区域 */
  .page-header {
    position: relative;
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    padding-bottom: 120rpx;
    overflow: hidden;
  }

  .header-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200rpx;
    background: url('') no-repeat;
    background-size: cover;
    opacity: 0.1;
  }

  .header-content {
    padding: 60rpx 30rpx 40rpx;
    position: relative;
    z-index: 1;
  }

  .header-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }

  .header-subtitle {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.9);
  }

  /* 导航栏返回按钮 */
  .tn-custom-nav-bar__back {
    width: 60%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    backdrop-filter: blur(10rpx);
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
  }

  /* 统计卡片 */
  .stats-card {
    margin: -80rpx 30rpx 30rpx;
    position: relative;
    z-index: 2;
  }

  .stats-content {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .stat-item-left,
  .stat-item-right {
    flex: 1;
    text-align: center;
  }

  .stat-number {
    font-size: 48rpx;
    font-weight: bold;
    margin-bottom: 12rpx;
    
    &.green {
      color: #4CAF50;
    }
  }

  .stat-label {
    font-size: 24rpx;
    color: #999;
  }

  .stat-divider {
    width: 1rpx;
    height: 80rpx;
    background: linear-gradient(to bottom, transparent, #E0E0E0, transparent);
    margin: 0 30rpx;
  }

  /* Tab导航 */
  .tab-container {
    display: flex;
    background: #FFFFFF;
    margin: 0 30rpx 20rpx;
    border-radius: 12rpx;
    padding: 8rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
  }

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.3s ease;
    
    &.active {
      background: #4CAF50;
      color: #FFFFFF;
      font-weight: 600;
      box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
    }
  }

  /* 积分列表 */
  .integral-list-container {
    padding: 0 30rpx 40rpx;
  }

  .integral-list {
    background: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
  }

  .integral-item {
    padding: 30rpx;
    border-bottom: 1rpx solid #F5F5F5;
    transition: background-color 0.3s ease;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: #F8F9FA;
    }
  }

  .item-content {
    width: 100%;
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
  }

  .item-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    margin-right: 20rpx;
  }

  .item-date {
    font-size: 24rpx;
    color: #999;
    flex-shrink: 0;
  }

  .item-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
  }

  .integral-amount {
    font-size: 36rpx;
    font-weight: bold;
    
    &.positive {
      color: #4CAF50;
    }
    
    &.negative {
      color: #FF5722;
    }
  }

  .status-badge {
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    font-size: 22rpx;
    font-weight: 500;
    
    &.status-completed {
      background: #E8F5E9;
      color: #4CAF50;
    }
    
    &.status-processing {
      background: #FFF3E0;
      color: #FF9800;
    }
    
    &.status-cancelled {
      background: #F5F5F5;
      color: #999;
    }
  }

  .item-footer {
    margin-top: 16rpx;
    padding-top: 16rpx;
    border-top: 1rpx solid #F0F0F0;
  }

  .item-remark {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 8rpx;
    line-height: 1.5;
  }

  .item-order {
    font-size: 24rpx;
    color: #999;
  }

  /* 空状态 */
  .empty-state {
    padding: 120rpx 30rpx;
    text-align: center;
    background: #FFFFFF;
    border-radius: 20rpx;
  }

  .empty-icon {
    font-size: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.5;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }

  /* 响应式优化 */
  @media (max-width: 750rpx) {
    .stat-number {
      font-size: 42rpx;
    }
    
    .item-title {
      font-size: 30rpx;
    }
  }
</style>